<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>setInterval Page 1</title>
  </head>
  <body>
    <h3>Page 1</h3>
    <section style="margin-top: 50px; text-align: center">
      <input id="inputMessage" value="测试消息" />
      <input type="button" value="发送消息" id="btnSend" />
      <section id="messages">
        <p>收到的消息：</p>
      </section>
    </section>

    <script>
      let messagesEle = document.getElementById("messages");
      let messageEl = document.getElementById("inputMessage");
      let btnSend = document.getElementById("btnSend");
      let lastMessage = null;

      setInterval(() => {
        let message = sessionStorage.getItem("ls-message2");
        try {
          if (message) {
            message = JSON.parse(message);
            if (!lastMessage || lastMessage.date != message.date) {
              appendMessage(message);
              lastMessage = message;
            }
          }
        } catch (err) {
          console.log(err);
        }
      }, 200);

      function appendMessage(data) {
        let msgEl = document.createElement("p");
        msgEl.innerText = data.date + " " + data.from + ":" + data.message;
        messagesEle.appendChild(msgEl);
      }

      btnSend.addEventListener("click", function () {
        let message = messageEl.value;

        sessionStorage.setItem(
          "ls-message1",
          JSON.stringify({
            date: Date.now(),
            message,
            from: "page 1",
          })
        );
      });
    </script>
  </body>
</html>
